<template>
	<view class="home">
		<!-- 搜索区域 -->
		<view class="search">
			<u-search :show-action="false" placeholder="请输入产品ID" :disabled="true" bgColor="#fff" height="80rpx"
				borderColor="#eee" margin=" 0 30rpx 0 30rpx" v-model="keyword"></u-search>
		</view>

		<!-- 轮播图 -->
		<view class="u-demo-block">
			<u-swiper :list="imgList" previousMargin="30" nextMargin="30" circular :autoplay="false" radius="5"
				bgColor="#ffffff"></u-swiper>
		</view>

		<!-- 宫格导航 -->
		<view class="grid">
			<tui-card>
				<template v-slot:body>
					<u-grid col="3" @click="click">
						<u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex">
							<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="baseListItem.name" :size="25"></u-icon>
							<text class="grid-text">{{baseListItem.title}}</text>
						</u-grid-item>
					</u-grid>
				</template>
			</tui-card>
		</view>

		<!-- 消息通知 -->
		<view class="message">
			<u-notice-bar :text="text" bgColor="#c4e1c5" speed="50" url="/pages/componentsB/tag/tag"></u-notice-bar>
		</view>

		<!-- 产品分类 -->
		<view class="product">
			<!--uni-app-->
			<tui-card>
				<template v-slot:body>
					<u-cell-group customStyle="background-color: #fff">
						<u-cell title="产品分类"></u-cell>
						<u-cell icon="integral-fill" v-for="item in productCateList" :key="item.id" :title="item.name"
							:isLink="true" @click="getAppointHost(item)">
							<img slot="icon" src="@/static/icon/server.png"></img>
						</u-cell>
					</u-cell-group>
				</template>
			</tui-card>
		</view>
	</view>
</template>

<script>
	import tuiCard from "@/components/thorui/tui-card/tui-card"
	export default {
		components: {
			tuiCard
		},
		data() {
			return {
				keyword: '',
				text: '这是一个非常装逼的滚动条，他可以显示内容',
				productCateList: [], // 产品分类
				baseList: [{
						name: 'photo',
						title: '账单'
					},
					{
						name: 'lock',
						title: '推介'
					},
					{
						name: 'star',
						title: '消息'
					},
					// {
					// 	name: 'hourglass',
					// 	title: '沙漏'
					// },
					// {
					// 	name: 'home',
					// 	title: '首页'
					// },
					// {
					// 	name: 'star',
					// 	title: '音量'
					// }
				],
				imgList: [
					'/static/swiper1.png',
					'/static/swiper2.png',
					'/static/swiper3.png',
					
				],
			}
		},
		onShow() {
			this.getProduct()
		},
		onTabItemTap(e) {
			if (e.text == '首页') {
				if (!this.$store.state.loginModules.jwtToken) {
					uni.switchTab({
						url: '/pages/my/my'
					})
				}
			}
		},
		methods: {
			// 获取产品分类
			async getProduct() {
				if (this.$store.state.loginModules.jwtToken) {
					const productResult = await uni.$http.get('/v1/hosts/cates')
					if (productResult.data.status !== 200) return uni.$showMsg()
					console.log(productResult);
					this.productCateList = productResult.data.data.cate
					console.log(this.productCateList);
				}
			},
			// 宫格按钮点击
			click(i) {
				console.log('点击索引' + i)
			},
			// 获取指定产品
			getAppointHost(item) {
				uni.navigateTo({
					url: '/subpages/consoleDetails/consoleDetails?id=' + item.id
				})
			},

			// 去搜索页
			goSearch() {
				uni.navigateTo({
					url: "/subpages/search/search"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	.search {
		background-color: #fff;
	}

	/deep/.tui-card-header {
		padding: unset !important;
	}

	/deep/.tui-card {
		margin: 30rpx 30rpx !important;
		border-radius: 20rpx !important;
	}

	.message {
		margin: 30rpx;

		.u-notice-bar {
			border-radius: 5%;
		}

	}


	.u-demo-block {
		margin: 30rpx 0 !important;
		background-color: #eee;
	}

	.grid-text {
		font-size: 25rpx;
		color: #000;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}

	.product {
		img {
			width: 50rpx;
			height: 50rpx;
			color: #000;
		}
	}
</style>
